<template>
  <div class="BtnGroupDevideTab">
    <div
      v-for="(item, index) in tabList"
      :key="index"
      :class="{'selected': item.value === currentTab}"
      class="BtnGroupDevideTab--item"
      @click="changeTab(item)"
    >{{ item.label }}
    </div>
    <div class="BtnGroupDevideTab--right">
      <slot></slot>
    </div>
  </div>
</template>

<script setup>

const emit = defineEmits(['change'])

const props = defineProps({
  tabList: {
    type: Array,
    default () {
      return [
        {
          label: '全部',
          value: 'M'
        },
        {
          label: '布防',
          value: 'E'
        },
        {
          label: '撤防',
          value: 'GB'
        },
        {
          label: '巡更',
          value: 'GB1'
        }
      ]
    }
  },
  tabActive: {
    type: [String, Number],
    default: 'M'
  }
})


onMounted (() => {
  currentTab.value = props.tabActive
})

watch(() => {
  return props.tabActive
}, (newValue) => {
  currentTab.value = newValue
})

const currentTab = ref(null)
// 切换tab 页签
function changeTab (item) {
  currentTab.value = item.value
  emit('change', item.value, item)
}

</script>

<style lang="scss" scoped>
.BtnGroupDevideTab {
  margin: 16px 0 16px 21px;
  display: flex;
  justify-content: flex-start;
  position: relative;

  &--item {
    cursor: pointer;
    height: 24px;
    padding: 0 10px;
    line-height: 24px;
    background-image: linear-gradient(270deg, rgba(0, 97, 165, 0.58) 0%, #0059A4 100%);
    border-radius: 2px;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: rgba(167, 222, 255, 0.5);
    font-weight: 400;
    margin-right: 12px;
  }

  .selected {
    background-image: linear-gradient(270deg, rgba(17, 85, 152, 0.58) 0%, #00A3FA 100%);
    font-family: PingFangSC-Semibold;
    font-size: 14px;
    color: #C9EBFF;
    font-weight: 600;
  }

  &--right{
    position: absolute;
    right: 18px;
    line-height: 24px;

    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: rgba(219, 236, 251, 0.7);
    letter-spacing: 0;
    text-align: right;
    font-weight: 400;
  }
}

</style>
